<script setup>
import { ref,computed } from 'vue';
import { httpRequest } from "../../utils/http";
import twoButton from "../../components/index/twoButton.vue";
import { onUnload } from '@dcloudio/uni-app';
import aipCheckbox from "../../components/index/aip-checkbox.vue";
const arr = ref([])
const show = ref(false)
const scrollCate = ref([])
const voiceList1 = ref([]);
const voiceList2 = ref([]);
const voiceList3 = ref([]);
const voiceList4 = ref([]);
const voiceList5 = ref([]);
const voiceList6 = ref([]);
const voiceList7 = ref([]);
const voiceList = computed(() => [
  voiceList1.value,
  voiceList2.value,
  voiceList3.value,
  voiceList4.value,
  voiceList5.value,
  voiceList6.value,
  voiceList7.value,
]);
const isReady = ref(false)
if(uni.getStorageSync('voiceArr')){
  voiceList.value = uni.getStorageSync('voiceArr')
  voiceList1.value = uni.getStorageSync('voiceArr')[0]||[]
  voiceList2.value = uni.getStorageSync('voiceArr')[1]||[]
  voiceList3.value = uni.getStorageSync('voiceArr')[2]||[]
  voiceList4.value = uni.getStorageSync('voiceArr')[3]||[]
  voiceList5.value = uni.getStorageSync('voiceArr')[4]||[]
  voiceList6.value = uni.getStorageSync('voiceArr')[5]||[]
  voiceList7.value = uni.getStorageSync('voiceArr')[6]||[]
  console.log(uni.getStorageSync('voiceArr').length);
  if(uni.getStorageSync('voiceArr').length){
    if((voiceList.value.filter(e=>e.length)).length>=5){
        isReady.value = true
      }else{
        isReady.value = false
      }
  }
  
}
const getTems = async() => {
    const res = await httpRequest('/api/getVoiceCateList','POST')
    arr.value = res.data
    scrollCate.value = [{
    id:0,
    name:'全部'
  },...res.data]
      console.log(arr.value);
}
getTems()
const popupAdd = ref(null)
const arrIndex = ref(0)
const addVoice = (e) => {
  arrIndex.value = e
  console.log(popupAdd.value);
  popupAdd.value.open('bottom')
}
const library = ref(null)
const openLibrary = () => {
  library.value.open('bottom')
}
onUnload(()=>{
  console.log(voiceList.value.filter(e=>e.length));
  uni.setStorageSync('voiceArr',voiceList.value.filter(e=>e.length))
})
const getOk = () => {
  if(!isReady.value) return
    if(!voiceList1.value.length||!voiceList2.value.length||!voiceList3.value.length||!voiceList4.value.length||!voiceList5.value.length)return uni.showToast({
        title: '请完善场景口播',
        icon: 'none'
    })
  uni.showLoading({
    title: "上传中",
    mask: true,
  });
  uni.hideLoading();
  uni.navigateBack({ delta: 1 });
  uni.setStorageSync('voiceArr',voiceList.value.filter(e=>e.length))
  uni.setStorageSync("isItem", isItem.value);
}

const voiceLibrary = ref([])
const isItem = ref(uni.getStorageSync('isItem')||[])
const clickItem = (item) => {
  if(fun(item.id)){
    isItem.value = isItem.value.filter(e=>e.id!=item.id)
    isAll.value = false
  }else{
    isItem.value.push(item)
    if(isItem.value.length == voiceLibrary.value.length){
      isAll.value = true
    }
  }
}

const scrollText = ref(0)
const clickCate = async(e) => {
  scrollText.value = e.id
  const res = await httpRequest('/api/getShopVoiceCopyByShopIdAndCateId','POST',{
    shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId,
    voiceCateId:e.id,
    type:1
  })
  voiceLibrary.value = res.data
}
const getLibrary = async() => {
  const res = await httpRequest('/api/getShopVoiceCopyByShopIdAndCateId','POST',{
    shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId,
    voiceCateId:0,
    type:1
  })
  console.log(res);
  voiceLibrary.value = res.data
}
getLibrary()

const fun = (id) => {
  console.log(isItem.value);
  let a = false
  isItem.value.forEach(e=>{
    if(e.id==id){
      a = true
    }
  })
  return a
}

const back1 = () => {
  add.value.close()
  library.value.open('bottom')

}

const add = ref(null)
const openAdd = () => {
  library.value.close()
  add.value.open('bottom')
  scrollText.value?scrollText.value:scrollText.value=1
}

const textarea = ref('')

const clickCate1 = (item) => {
  scrollText.value = item.id
}

const addLibrary = async() => {
  if(textarea.value.trim().length<10||textarea.value.trim().length>24)return uni.showToast({
    title: '请输入10-24个字',
    icon: 'none'
  })
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  console.log(item.value);
if(isEdit.value){
  //修改
  if(item.value.m4aPath2){
    httpRequest('/api/delStagFile','POST',{
    videoPath:item.value.m4aPath
  })
  }else{
    httpRequest('/api/delShopVoiceCopy','POST',{
      shopVoiceCopyId:item.value.id
    })
  }
  
  const res = await uni.request({
    url: 'https://www.diandianyouke.cn:8081/api/addShopVoiceCopy',
    data: {
    content:textarea.value.trim(),
    type:1,
    voiceCateId:item.value.voiceCateId,
    shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId,
    m4aPath2:item.value.m4aPath2?1:''
  },
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    method: 'POST',
  })
  uni.hideLoading()
  console.log(res);
  if(i1.value == 0){
    voiceList1.value.splice(index1.value,1)
    voiceList1.value.splice(index1.value,0,res.data.data)
  }else if(i1.value == 1){
    voiceList2.value.splice(index1.value,1)
    voiceList2.value.splice(index1.value,0,res.data.data)
  }else if(i1.value == 2){
    voiceList3.value.splice(index1.value,1)
    voiceList3.value.splice(index1.value,0,res.data.data)
  }else if(i1.value == 3){
    voiceList4.value.splice(index1.value,1)
    voiceList4.value.splice(index1.value,0,res.data.data)
  }else if(i1.value == 4){
    voiceList5.value.splice(index1.value,1)
    voiceList5.value.splice(index1.value,0,res.data.data)
  }else if(i1.value == 5){
    voiceList6.value.splice(index1.value,1)
    voiceList6.value.splice(index1.value,0,res.data.data)
  }else if(i1.value == 6){
    voiceList7.value.splice(index1.value,1)
    voiceList7.value.splice(index1.value,0,res.data.data)
  }
  if(res.data.data){
    uni.showToast({
      title:'修改成功',
      icon:'none'
    })
    textarea.value = ''
    add.value.close()
  }else{
    uni.showToast({
      title:'修改失败',
      icon:'error'
    })
  }
}else{
  const res = await uni.request({
    url: 'https://www.diandianyouke.cn:8081/api/addShopVoiceCopy',
    data: {
    content:textarea.value.trim(),
    type:1,
    voiceCateId:scrollText.value?scrollText.value:1,
    shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId
  },
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    method: 'POST',
  })
  uni.hideLoading()
  console.log(res);
  if(res.data.data){
    uni.showToast({
      title:'添加成功',
      icon:'none'
    })
    textarea.value = ''
    if((voiceList.value.filter(e=>e.length)).length>=5){
        isReady.value = true
      }else{
        isReady.value = false
      }
  }else{
    uni.showToast({
      title:'添加失败',
      icon:'error'
    })
  }
} 
}

const isAll = ref(false)
const checkAll = () => {
  isAll.value = !isAll.value
  if(isAll.value){
    isItem.value = voiceLibrary.value
  }else{
    isItem.value = []
  }
}
const popupChange = (e) => {
  show.value = e.show
  if(!e.show){
  isEdit.value = false
  }
}

const isSav = ref(true)
const switch2Change = (e) => {
  isSav.value = e.detail.value
}

const OoVoice = async() => {
  if(textarea.value.trim().length<10||textarea.value.trim().length>24)return uni.showToast({
    title: '请输入10-24个字',
    icon: 'none'
  })
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  // if(arrIndex.value == 3){
  //   if(!videoArr4.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
  // }else if(arrIndex.value == 4){
  //   if(!videoArr5.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
  // }else if(arrIndex.value == 5){
  //   if(!videoArr6.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
  // }else if(arrIndex.value == 6){
  //   if(!videoArr7.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
  // }
  const res = await uni.request({
    url: 'https://www.diandianyouke.cn:8081/api/addShopVoiceCopy',
    data: {
    content:textarea.value.trim(),
    type:1,
    voiceCateId:arr.value[arrIndex.value].id,
    shopId:uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId,
    m4aPath2:isSav.value?'':1
  },
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    method: 'POST',
  })
  uni.hideLoading()
  console.log(res.data);
  if(arrIndex.value == 0){
    voiceList1.value = [...voiceList1.value,res.data.data]
  }else if(arrIndex.value == 1){
    voiceList2.value = [...voiceList2.value,res.data.data]
  }else if(arrIndex.value == 2){
    voiceList3.value = [...voiceList3.value,res.data.data]
  }else if(arrIndex.value == 3){
    // if(!videoArr4.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
    voiceList4.value = [...voiceList4.value,res.data.data]
  }else if(arrIndex.value == 4){
    // if(!videoArr5.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
    voiceList5.value = [...voiceList5.value,res.data.data]
  }else if(arrIndex.value == 5){
    // if(!videoArr6.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
    voiceList6.value = [...voiceList6.value,res.data.data]
  }else if(arrIndex.value == 6){
    // if(!videoArr7.value.length) return uni.showToast({title:'请先上传该场景视频',icon:'none'})
    voiceList7.value = [...voiceList7.value,res.data.data]
  }
  textarea.value = ''
  if((voiceList.value.filter(e=>e.length)).length>=5){
        isReady.value = true
      }else{
        isReady.value = false
      }
}

const next = () => {
  if(arr.value.length<=(arrIndex.value+1)){
    arrIndex.value = 0
  } else {
    textarea.value = ''
    arrIndex.value++
  }
}
const isEdit = ref(false)
const item = ref('')
const i1 = ref('')
const index1 = ref('')
const editVoice = (e,i,index) => {
  isEdit.value = true
  item.value = e
  i1.value = i
  index1.value = index
  textarea.value = e.content
  add.value.open('bottom')
}

const delVoice = (e,i,index) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除吗?',
    success: ({ confirm, cancel }) => {
      if(confirm){
        if(e.m4aPath2){
          httpRequest('/api/delStagFile','POST',{
           videoPath:e.m4aPath
          })
        }
  if(i == 0){
    voiceList1.value.splice(index,1)
  }else if(i == 1){
    voiceList2.value.splice(index,1)
  }else if(i == 2){
    voiceList3.value.splice(index,1)
  }else if(i == 3){
    voiceList4.value.splice(index,1)
  }else if(i == 4){
    voiceList5.value.splice(index,1)
  }else if(i == 5){
    voiceList6.value.splice(index,1)
  }else if(i == 6){
    voiceList7.value.splice(index,1)
  }
  if((voiceList.value.filter(e=>e.length)).length>=5){
    isReady.value = true
  }else{
    isReady.value = false
  }
      }
    }
  })
}

//导入
const verify = () => {
  let li = []
  isItem.value.forEach(e=>{
    if(!voiceList1.value.some(item=>item.id==e.id)&&!voiceList2.value.some(item=>item.id==e.id)&&!voiceList3.value.some(item=>item.id==e.id)&&!voiceList4.value.some(item=>item.id==e.id)&&!voiceList5.value.some(item=>item.id==e.id)){
      li.push(e)
    }
  })
  // isItem.value = li
  let v1 = li.filter(e=>e.voiceCateId==1)
  let v2 = li.filter(e=>e.voiceCateId==2)
  let v3 = li.filter(e=>e.voiceCateId==3)
  let v4 = li.filter(e=>e.voiceCateId==4)
  let v5 = li.filter(e=>e.voiceCateId==5)
  let v6 = li.filter(e=>e.voiceCateId==6)
  let v7 = li.filter(e=>e.voiceCateId==7)
  if(voiceList1.value.concat(v1).length>10
  ||voiceList2.value.concat(v2).length>10
  ||voiceList3.value.concat(v3).length>10
  ||voiceList4.value.concat(v4).length>10
  ||voiceList5.value.concat(v5).length>10
  ||voiceList6.value.concat(v6).length>10
  ||voiceList7.value.concat(v7).length>10
  )return uni.showToast({
    title: '场景口播最多上传10个',
    icon: 'none'
  })
  voiceList1.value = voiceList1.value.concat(v1)
  voiceList2.value = voiceList2.value.concat(v2)
  voiceList3.value = voiceList3.value.concat(v3)
  voiceList4.value = voiceList4.value.concat(v4)
  voiceList5.value = voiceList5.value.concat(v5)
  if((voiceList.value.filter(e=>e.length)).length>=5){
    isReady.value = true
  }else{
    isReady.value = false
  }
    library.value.close()
// isItem.value = []
// isAll.value = false
}
const close = (e) => {
  if(e=='a'){
    add.value.close()
  }
  popupAdd.value.close()
  library.value.close()
}
</script>

<template>
    <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view style="background-color: rgb(246,248,251);overflow: hidden;padding-bottom: 200rpx;min-height:940rpx;">
    <view class="items" v-for="(e, i) in arr" :key="i">
        <view class="title">
          <text>{{e.name}}<text style="color: rgb(255,55,71);">*</text></text>
        </view>
        <view>
          <view class="videos">
            <view class="addVideo" @click="addVoice(i)">
              <image
                style="width: 96rpx; height: 96rpx"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_tjkbo.png"
                mode="scaleToFill"
              />
              <text style="font-size: 24rpx; color: rgba(142, 84, 244, 1)">添加口播</text>
            </view>
            <view
              style="overflow-x: scroll; white-space: nowrap; width: 520rpx;display: flex;align-items: center;"
            >
              <view
                style="
                  padding-top: 18rpx;
                  display: inline-block;
                  position: relative;
                  width: 160rpx;
                  height: 178rpx;
                  margin-right: 20rpx;
                "
                v-for="(item, index) in voiceList[i]"
                :key="index"
              >
                <view
                @click="editVoice(item, i,index)"
                  style="
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 16rpx;
                    padding: 16rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: rgb(48,49,51);
                    color: #fff;
                    font-size: 20rpx;
                    box-sizing: border-box;
                    white-space: normal;
                  "
                > {{ item.content }}</view>
                <image
                  @click="delVoice(item, i,index)"
                  style="
                    width: 48rpx;
                    height: 48rpx;
                    position: absolute;
                    right: -16rpx;
                    top: 0;
                  "
                  src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/xxxx.png"
                  mode=""
                />
              </view>
            </view>
          </view>
        </view>
      <!-- </view> -->
    </view>
      <twoButton
      @leftClick="openLibrary"
        @rightClick="getOk"
        :isReady='isReady'
        left="口播库导入"
        right="确认"/>
        <!-- <btnModule v-else @customClick="goIP" message="确认"/> -->
  </view>
  <uni-popup ref="library" @change="popupChange" :safe-area="false">
      <view class="content">
        <view class="close">
        <image
          class="close-btn"
          @click="close"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        口播库
        <text @click="openAdd" class="addbtn"
          >新增</text
        >
      </view>
      <scroll-view scroll-x class="scroll">
        <view class="scroll-item" v-for="item in scrollCate" :key="item.id" @click="clickCate(item)" :class="scrollText==item.id?'scroll-style':''">{{ item.name }}</view>
      </scroll-view>
      <view class="kong" v-if="!voiceLibrary.length">
        <image style="width: 610rpx;height: 368rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/state_empty.png"/>
        <text>暂无内容</text>
      </view>
      <view v-else class="list">
        <view class="library-item" :class="fun(item.id)?'active-item':''" @click="clickItem(item)" v-for="item in voiceLibrary" :key="item.id">
          {{ item.content }}
        </view>
        <view class="bottom-btn1">
        <view class="all" @click="checkAll">
          <aip-checkbox :check="isAll"></aip-checkbox>
          全选</view
        >
        <button class="verify" @click="verify">
          导入{{ isItem.length?isItem.length:'' }}
        </button>
      </view>
      </view>
      </view>
    </uni-popup>
    <uni-popup ref="add" @change="popupChange">
      <view class="content">
        <view class="close">
        <image
        v-if="isEdit"
          class="close-btn"
          @click="close('a')"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        <image
        v-else
          class="close-btn"
          @click="back1"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/tdian_icon_tjkbo_fhui.png"
          mode=""
        />
        {{isEdit?'修改口播':'添加新口播'}}
      </view>
      <scroll-view scroll-x class="scroll" v-if="!isEdit">
        <view class="scroll-item" v-for="item in arr" :key="item.id" @click="clickCate1(item)" :class="scrollText==item.id?'scroll-style':''">{{ item.name }}</view>
      </scroll-view>
      <view class="textarea" :style="isEdit?'margin-top: 30rpx;':''"><fui-textarea height="120rpx" padding="0" :borderTop="false" :borderBottom="false" v-model="textarea" placeholder="请输入口播内容" placeholder-style="font-size:28rpx"></fui-textarea></view>
      <view class="zi" :style="isEdit?'bottom: 705rpx;':''">请输入10-24字 | <text :class="textarea.trim().length?'textarea-style':''">{{ textarea.trim().length }}字</text></view>
      <view class="flxed">
        <button @click="addLibrary" class="tianjia" :class="textarea.trim()?'tianjia-style':''">{{isEdit?'修改':'添加'}}</button>
      </view>
      </view>
    </uni-popup>
    <uni-popup ref="popupAdd" @change="popupChange">
      <view class="content">
        <view class="close">
        <image
          class="close-btn"
          @click="close"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        {{arr[arrIndex].name}}
        <text @click="next" class="addbtn"
          >下一场景</text
        >
      </view>
      <view class="scroll">
        <text style="margin-right: 24rpx;">存入口播库</text>
        <switch style="transform:scale(0.7)" color="rgb(142,84,244)" @change="switch2Change" :checked="true" />
      </view>
      <view class="textarea"><fui-textarea height="120rpx" padding="0" :borderTop="false" :borderBottom="false" v-model="textarea" placeholder="请输入口播内容" placeholder-style="font-size:28rpx"></fui-textarea></view>
      <view class="zi">请输入10-24字 | <text :class="textarea.trim().length?'textarea-style':''">{{ textarea.trim().length }}字</text></view>
      <view class="flxed">
        <button @click="OoVoice" class="tianjia" :class="textarea.trim()?'tianjia-style':''">添加</button>
      </view>
      </view>
  </uni-popup>
</template>

<style lang="scss">
.items {
  padding: 36rpx 30rpx;
  margin-top: 24rpx;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 96rpx;
    font-size: 32rpx;
    margin-bottom: 20rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    line-height: 46rpx;
  }
  .videos {
    display: flex;
    margin-top: 20rpx;
    .addVideo {
      width: 160rpx;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px dashed rgba(142, 84, 244, 1);
      margin-right: 10rpx;
      border-radius: 16rpx;
      transform: translateY(18rpx);
      margin-bottom: 36rpx;
    }
  }
}
.content{
  width: 100%;
  height: 1000rpx;
  border-radius: 32rpx 32rpx 0 0;
  background-color: #fff;
  .from{
    overflow-y: scroll;
    width: 690rpx;
    height: 1044rpx;
    background-color: rgb(249,249,249);
    border-radius: 16rpx;
    padding: 0 30rpx;
    padding-bottom: 356rpx;
    margin: 30rpx;
    box-sizing: border-box;
    .name{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 630rpx;
      height: 116rpx;
      font-size: 30rpx;
      color: rgb(69,70,74);
      border-bottom: 1px solid rgb(220, 223, 230);
      .input{
        text-align: right;
      }
    }

  }
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .scroll{
    height: 64rpx;
    margin: 30rpx 30rpx 30rpx 30rpx;
    font-size: 28rpx;
    color: rgb(144,147,153);
    white-space: nowrap;
    .scroll-item{
      display: inline-block;
      height: 64rpx;
      padding: 0 30rpx;
      text-align: center;
      line-height: 64rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
      background-color: #fff;
      margin-right: 30rpx;
      border-radius: 8rpx;
      box-sizing: border-box;
      &:nth-child(1){
        margin-left: 30rpx;
      }
    }
  }
  .kong{
    width: 610rpx;
    margin: 120rpx 70rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
  }
  .list{
    overflow-y: scroll;
    padding: 0 30rpx;
    height: 598rpx;
    padding-bottom: 170rpx;
    .library-item{
      width: 690rpx;
      padding: 30rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      color: rgb(69,70,74);
      border-radius: 12rpx;
      border: 1px solid transparent;
      margin-bottom: 30rpx;
      background-color: rgb(249,249,249);
    }
    .bottom-btn1 {
      position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 166rpx;
    padding: 10rpx 30rpx 0;
    .all {
      display: flex;
      align-items: center;
      height: 88rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
    }
    .verify {
      width: 552rpx;
      height: 86rpx;
      padding: 0;
      margin: 0;
      text-align: center;
      line-height: 86rpx;
      color: #fff;
      background-color: rgb(142, 84, 244);
      font-size: 32rpx;
      margin-left: 18rpx;
    }
  }
  }
  .textarea{
    width: 690rpx;
    height: 180rpx;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin-left: 30rpx;
    border: 1px solid rgb(220, 223, 230);
  }
  .zi{
    position: absolute;
    bottom: 594rpx;
    right: 60rpx;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
  }
  .flxed{
          width: 100%;
          height: 166rpx;
          position: fixed;
          bottom: 0;
          left: 0;
          background-color: #fff;
          .tianjia{
            width: 690rpx;
            height: 88rpx;
            margin: 10rpx 30rpx 0;
            font-size: 32rpx;
            text-align: center;
            line-height: 88rpx;
            background-color: rgba(241, 241, 241, 1);
            color: rgb(192,196,204);
          }
        }
  .item{
    width: 690rpx;
    margin: 30rpx;
    border-radius: 24rpx;
    border: 1px solid rgb(220,223,230);
    .name{
      width: 630rpx;
      margin: 36rpx 30rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: rgb(144,147,153);
      .text{
        color: rgb(69,70,74);
      }
    }
  }
}
.scroll-style{
      background-color: rgb(142,84,244) !important;
      color: #fff !important;
    }
    .active-item{
      border: 1px solid rgb(142, 84, 244) !important;
    }
    .tianjia-style{
  background-color: rgb(142,84,244) !important;
  color: #fff !important;
}
</style>
